import React from 'react';
import { Table, Space, Button, Tooltip, Tag } from 'antd';
import { FolderOpenOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useLanguage } from '../../i18n/I18nProvider';
import { ProjectNode } from './ProjectCard';
import './ProjectTable.scss';
import {ProjectSimpleTree} from "../../../types";
import apiService from '../../services';

interface ProjectTableProps {
  projects: ProjectSimpleTree[];
}

interface ProjectTableRecord extends ProjectSimpleTree {
  key: string;
  children?: ProjectTableRecord[];
}

const ProjectTable: React.FC<ProjectTableProps> = ({ projects }) => {
  const { t } = useLanguage();
  const navigate = useNavigate();

  // 递归构建项目树数据
  const buildProjectTreeData = (projects: ProjectSimpleTree[]): ProjectTableRecord[] => {
    return projects.map((project): ProjectTableRecord => {
      const record: ProjectTableRecord = {
        key: project.path,
        ...project,
        children: project.children?.length ? buildProjectTreeData(project.children) : undefined
      };
      return record;
    });
  };

  // 处理查看项目详情
  const handleViewDetail = (path: string) => {
    navigate(`/projects/${encodeURIComponent(path)}`);
  };

  // 处理打开目录
  const handleOpenDir = (path: string) => {
    apiService.system.openDir(path);
  };

  // 表格列定义
  const columns = [
    {
      title: t('projects.name'),
      dataIndex: 'name',
      key: 'name',
      render: (text: string, record: ProjectTableRecord) => (
        <Space>
          <span className="project-icon">📄</span>
          <span>{text}</span>
        </Space>
      ),
    },
    {
      title: t('projects.type'),
      dataIndex: 'type',
      key: 'type',
      render: (text: string, record: ProjectTableRecord) => (
        <Tag color={record.colors.color} style={{backgroundColor: record.colors.lightColor, color: record.colors.color}}>{text}</Tag>
      ),
    },
    {
      title: t('projects.path'),
      dataIndex: 'path',
      key: 'path',
      render: (text: string) => (
        <Tooltip title={text}>
          <span className="path-ellipsis">{text}</span>
        </Tooltip>
      ),
    },
    {
      title: t('projects.actions'),
      key: 'actions',
      render: (_: any, record: ProjectTableRecord) => (
        <Space>
          <Button
            type="link"
            size="small"
            icon={<InfoCircleOutlined />}
            onClick={() => handleViewDetail(record.path)}
          >
            {t('projects.detail')}
          </Button>
          <Button
            type="link"
            size="small"
            icon={<FolderOpenOutlined />}
            onClick={() => handleOpenDir(record.path)}
          >
            {t('projects.open')}
          </Button>
        </Space>
      ),
    },
  ];

  const treeData = buildProjectTreeData(projects);

  return (
    <div className="project-table-view">
      <Table
        columns={columns}
        dataSource={treeData}
        pagination={false}
        expandable={{
          defaultExpandAllRows: true,
        }}
      />
    </div>
  );
};

export default ProjectTable;
